<template>
    <view style="height: 100%">
        <input type="text" class="header-input" placeholder="搜索失物" placeholder-style="font-size:26rpx;text-align:center;" @input="handleInputChange" />
        <view class="navis">
            <view class="navis-child" :data-type="item.type" @tap="changeType" v-for="(item, index) in tabs" :key="index">
                <image :src="'../../resource/' + item.type + '.png'" class="navis-ph"></image>

                {{ item.name }}

                <view class="navis-active"></view>
            </view>
        </view>
        <block v-if="type === 'recommend'">
            <!-- <view class="whole">
<view class="block">
  <image src="../../resource/backg.jpg" class="img"></image>
</view>
<view class="block"></view>
<view class="block"></view>
<view class="block"></view>
  </view> -->
            <view class="whole">
                <view class="item" :data-sign="item.sign" @tap="handlePage" v-for="(item, index) in searchList ? searchList : stuffs" :key="index">
                    <image class="item-image" :src="item.img"></image>

                    <view class="item-content">
                        <view class="item-content-title">{{ item.title }}</view>
                        <text class="item-content-tags-content">{{ item.spot }}</text>
                        <text class="item-content-tags-content">{{ item.time }}</text>
                        <text class="item-content-tags-content">{{ item.sign }}</text>
                    </view>
                </view>
            </view>
        </block>
        <block v-if="type === 'path'">
            <view class="add">
                <view class="photos">
                    <form @submit="formSubmit" @reset="formReset">
                        <view style="position: fixed; width: 100%">
                            <view class="tu1">
                                <block v-for="(item, index) in img_arr" :key="index">
                                    <view class="logoinfo">
                                        <image class="logoinfo" mode="aspectFill" :src="item" :data-index="index" @tap="previewImg" @longpress="deleteImg" name="headimage"></image>
                                    </view>
                                </block>
                                <image @tap="upimg" class="tu" src="/static/resource/plus.png"></image>
                            </view>
                            <view class="an1"></view>
                        </view>
                    </form>
                </view>
                <view class="photos"></view>
                <view class="photos"></view>
            </view>

            <view class="div"></view>
            <view class="name">失物名称</view>
            <view class="div"></view>

            <view>添加描述</view>
            <view class="div"></view>

            <view>丢失时间</view>
            <view class="div"></view>

            <view>丢失地点</view>
        </block>
        <block v-if="type === 'project'">
            <view class="add">
                <view class="photos"></view>
                <view class="photos"></view>
                <view class="photos"></view>
            </view>

            <view class="div"></view>
            <view class="name">失物名称</view>
            <view class="div"></view>

            <view>添加描述</view>
            <view class="div"></view>

            <view>拾取时间</view>
            <view class="div"></view>

            <view>拾取地点</view>
        </block>
    </view>
</template>

<script>
// pages/find/find.js
var form_data;
var psw_vaule = [];
export default {
    data() {
        return {
            tempFilePaths: [],
            img_arr: [],
            stuffs: [
                {
                    title: 'stuffName',
                    spot: 'dd',
                    img: '/static/resource/backg.jpg',
                    time: '2021-9-10',
                    sign: 'ddddddddddd'
                },
                {
                    title: 'stuffName',
                    spot: 'dd',
                    img: '/static/resource/backg.jpg',
                    time: '2021-9-10',
                    sign: 'ddddddddddd'
                },
                {
                    title: 'stuffName',
                    spot: 'dd',
                    img: '/static/resource/backg.jpg',
                    time: '2021-9-10',
                    sign: 'ddddddddddd'
                },
                {
                    title: 'stuffName',
                    spot: 'dd',
                    img: '/static/resource/backg.jpg',
                    time: '2021-9-10',
                    sign: 'ddddddddddd'
                }
            ],
            searchList: null,
            tabs: [
                {
                    name: '全部',
                    type: 'recommend'
                },
                {
                    name: '寻物',
                    type: 'path'
                },
                {
                    name: '寻主',
                    type: 'project'
                }
            ],
            type: 'recommend'
        };
    },
    methods: {
        changeType(e) {
            const type = e.currentTarget.dataset.type;
            this.setData({
                type
            });
        },

        formSubmit: function () {
            var that = this;
            var adds = that.img_arr;
            for (var i = 0; i < this.img_arr.length; i++) {
                uni.uploadFile({
                    url: 'http://localhost:8081/WxMiniapp/goods/upload',
                    //填写实际接口，仅测试
                    filePath: that.img_arr[i],
                    name: 'content',
                    formData: {
                        user: adds
                    },
                    success: function (res) {
                        console.log(res);
                        if (res) {
                            uni.showToast({
                                title: '已提交发布！',
                                duration: 3000
                            });
                        }
                    }
                });
            }
            // this.setData({
            //   formdata: ''
            // })
        },

        //从本地获取照片
        upimg: function () {
            var that = this;
            if (this.img_arr.length < 9) {
                uni.chooseImage({
                    count: 9,
                    //一次性上传到小程序的数量
                    sizeType: ['original', 'compressed'],
                    sourceType: ['album', 'camera'],
                    success(res) {
                        console.log(res);
                        const tempFilePaths = res.tempFilePaths;
                        console.log(res.tempFilePaths);
                        //concat() 方法用于连接两个或多个数组
                        that.setData({
                            img_arr: that.img_arr.concat(res.tempFilePaths)
                        });
                    }
                });
            } else {
                uni.showToast({
                    title: '最多上传九张图片',
                    icon: 'loading',
                    duration: 2000
                });
            }
        },

        //删除照片功能与预览照片功能
        deleteImg: function (e) {
            var that = this;
            var img_arr = that.img_arr;
            var index = e.currentTarget.dataset.index;
            uni.showModal({
                title: '提示',
                content: '确定要删除此图片吗？',
                success: function (res) {
                    if (res.confirm) {
                        console.log('点击确定了');
                        img_arr.splice(index, 1);
                    } else if (res.cancel) {
                        console.log('点击取消了');
                        return false;
                    }
                    that.setData({
                        img_arr: img_arr
                    });
                }
            });
        },

        //预览图片
        previewImg: function (e) {
            var index = e.currentTarget.dataset.index;
            var img_arr = this.img_arr;
            uni.previewImage({
                current: img_arr[index],
                urls: img_arr
            });
        }
    }
};
</script>
<style>
/* pages/find/find.wxss */
.header-input {
    border: 1rpx solid #a0a7ad;
    margin: 22rpx 36rpx 14rpx 36rpx;
    line-height: 65rpx;
    border-radius: 36rpx;
    padding: 0 36rpx;
}
.navis {
    margin-top: 20rpx;
    display: flex;
    line-height: 60rpx;
    padding-right: 10rpx;
    margin-bottom: 10rpx;
}
.navis-child {
    text-align: center;
    font-size: 32rpx;
    flex: 1;
    color: #444647;
    position: relative;
}
.navis-ph {
    width: 36rpx;
    height: 36rpx;
    position: relative;
    top: 9rpx;
}

.whole {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.item {
    display: flex;
    position: relative;
    margin-left: 20rpx;
    margin-top: 20rpx;
    margin-bottom: 10rpx;
    border: 3rpx solid #444647;
    width: 320rpx;
    flex-basis: 320rpx;
    height: 500rpx;
}
item-image {
    position: absolute;
    flex: 1;
    width: 208rpx;
    height: 10rpx;
    border-radius: 16rpx;
    /* top: 0;
  left: 0; */
}

.item-content {
    border-top: 3rpx solid #7f8183;
    flex: 1;
    position: absolute;
    top: 390rpx;
    left: 5rpx;
}
.item-content-title {
    line-height: 25rpx;
    font-size: 30rpx;
    columns: #282828;
    font-weight: bold;
}
.item-content-tags-content {
    margin-left: 10rpx;
    font-size: 24rpx;
    line-height: 16rpx;
    color: #f1b1b1;
    font-weight: bold;
}
.add {
    display: flex;
}
.photos {
    border: 3rpx solid #444647;
    flex-basis: 200rpx;
    height: 200rpx;
    margin-left: 20rpx;
    margin-top: 20rpx;
    margin-bottom: 10rpx;
    margin-right: 20rpx;
    flex: 1;
}
.div {
    margin-top: 30rpx;
    border-bottom: 4rpx dotted #444647;
    width: 750rpx;
}
.name {
    line-height: 30rpx;
    font-weight: bold;
    margin: 20rpx;
}
.tu {
    /* border: 3rpx solid rgba(0, 0, 0, 0.329);  */
    border-radius: 10rpx;
    height: 200rpx;
    width: 200rpx;
    /* margin: 5rpx 5rpx 5rpx 5rpx;    */
}
.logoinfo {
    height: 200rpx;
    width: 200rpx;
    /* margin: 10rpx 10rpx 10rpx 10rpx; */
}
.tu1 {
    display: flex;
    flex-flow: row wrap;
    align-content: space-around;
}
.an {
    height: 90rpx;
    width: 270rpx;
    font-size: 38rpx;
    background-color: rgba(146, 163, 45, 0.288);
    font-weight: 600;
    color: white;
}
button::after {
    border: none;
}
.an1 {
    margin-top: 90rpx;
}
</style>
